<script setup lang="ts">
import {ref} from 'vue';
import dayjs from 'dayjs';
import {useDrawer} from '#/ui-kit';

const details = ref({});

const [Drawer, drawerApi] = useDrawer({
  showConfirmButton: false,
  destroyOnClose: true,
  onBeforeClose: () => {
    drawerApi.setData({});
  },
  onOpenChange: (isOpen) => {
    if (isOpen) {
      details.value = drawerApi.getData();
    }
  },
});

const businessTypeMap = {
  0: '其他',
  1: '新增',
  2: '修改',
  3: '删除',
  4: '授权',
  5: '导出',
  6: '导入',
  7: '强退',
}
</script>

<template>
  <Drawer>
    <div class="w-full">
      <div
          class="coding inverse-toggle px-5 pt-4 shadow-lg text-gray-100 text-sm font-mono bg-gray-800 pb-6 rounded-lg leading-normal overflow-hidden">
        <div class="mt-4 flex">
          <span class="text-green-400 " style="width: 100px;">业务模块：</span>
          <p class="flex-1 typing items-center pl-2 whitespace-normal overflow-hidden break-all">
            {{ details?.title }}
          </p>
        </div>

        <div class="mt-4 flex">
          <span class="text-green-400 " style="width: 100px;">业务类型：</span>
          <p class="flex-1 typing items-center pl-2 whitespace-normal overflow-hidden break-all">
            {{ businessTypeMap[details?.businessType] }}
          </p>
        </div>

        <div class="mt-4 flex">
          <span class="text-green-400 " style="width: 100px;">操作账号：</span>
          <p class="flex-1 typing items-center pl-2 whitespace-normal overflow-hidden break-all">
            {{ details?.username }}
          </p>
        </div>

        <div class="mt-4 flex">
          <span class="text-green-400 " style="width: 100px;">操作姓名：</span>
          <p class="flex-1 typing items-center pl-2 whitespace-normal overflow-hidden break-all">
            {{ details?.nickname }}
          </p>
        </div>

        <div class="mt-4 flex">
          <span class="text-green-400 " style="width: 100px;">请求方式：</span>
          <p class="flex-1 typing items-center pl-2 whitespace-normal overflow-hidden break-all">
            {{ details?.requestMethod }}
          </p>
        </div>

        <div class="mt-4 flex">
          <span class="text-green-400 " style="width: 100px;">URL 地址：</span>
          <p class="flex-1 typing items-center pl-2 whitespace-normal overflow-hidden break-all">
            {{ details?.url }}
          </p>
        </div>

        <div class="mt-4 flex">
          <span class="text-green-400 " style="width: 100px;">IP 地址：</span>
          <p class="flex-1 typing items-center pl-2 whitespace-normal overflow-hidden break-all">
            {{ details?.ip }}
          </p>
        </div>

        <div class="mt-4 flex">
          <span class="text-green-400 " style="width: 100px;">请求方法：</span>
          <p class="flex-1 typing items-center pl-2 whitespace-normal overflow-hidden break-all">
            {{ details?.method }}
          </p>
        </div>

        <div class="mt-4 flex">
          <span class="text-green-400 " style="width: 100px;">请求体：</span>
          <p class="flex-1 typing items-center pl-2 whitespace-normal overflow-hidden break-all">
            {{ details?.request }}
          </p>
        </div>

        <div class="mt-4 flex" v-if="details?.response">
          <span class="text-green-400 " style="width: 100px;">响应体：</span>
          <p class="flex-1 typing items-center pl-2 whitespace-normal overflow-hidden break-all">
            {{ details?.response }}
          </p>
        </div>

        <div class="mt-4 flex">
          <span class="text-green-400 " style="width: 100px;">耗时：</span>
          <p class="flex-1 typing items-center pl-2 whitespace-normal overflow-hidden break-all">
            {{ details?.takeTime + 'ms' }}
          </p>
        </div>

        <div class="mt-4 flex">
          <span class="text-green-400 " style="width: 100px;">响应状态：</span>
          <p class="flex-1 typing items-center pl-2 whitespace-normal overflow-hidden break-all">
            {{ details?.status === 0 ? '成功' : '失败' }}
          </p>
        </div>

        <div class="mt-4 flex" v-if="details?.errorMsg">
          <span class="text-green-400 " style="width: 100px;">错误信息：</span>
          <p class="flex-1 typing items-center pl-2 whitespace-normal overflow-hidden break-all">
            {{ details?.errorMsg }}</p>
        </div>

        <div class="mt-4 flex" v-if="details?.operateTime">
          <span class="text-green-400 " style="width: 100px;">操作时间：</span>
          <p class="flex-1 typing items-center pl-2 whitespace-normal overflow-hidden break-all">
            {{ dayjs(details?.operateTime).format('YYYY-MM-DD HH:mm:ss') }}
          </p>
        </div>
      </div>
    </div>
  </Drawer>
</template>